<template>
  <BasicModal @register="registerModal" width="950px" :title="t(title)" @ok="handleSubmit">
    <BasicForm @register="registerForm" />
    <template #footer>
      <a-space>
        <a-button size="middle" @click="closeModal">{{ t('取消') }}</a-button>
        <a-button size="middle" type="primary" :loading="confirmLoading" @click="handleSubmit()">
          {{t('保存')}}
          </a-button>
      </a-space>
    </template>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { queryDropDownBox } from '/@/api/iesd/styleanalysiss';
  import { getDictTypeList } from '/@/api/system/dict';
  import { useI18n } from '/@/hooks/web/useI18n';
  const title = ref<string>('修改部件');
  const confirmLoading = ref<boolean>(false);
  const { t } = useI18n();
  const emits = defineEmits(['success']);
  const schemas: FormSchema[] = [
    {
      field: 'analysisId',
      label: t('分析类型'),
      component: 'Select',
      componentProps: {
        placeholder: t('请选择'),
      },
      colProps: { span: 7 },
    },
    {
      field: 'styleExplain',
      label: t('款说明'),
      component: 'Select',
      componentProps: {
        placeholder: t('请选择'),
      },
      colProps: { span: 7 },
    },
    {
      field: 'sectionSewingSam',
      label: '车缝SAM',
      component: 'InputNumber',
      componentProps: {
        placeholder: t('请输入'),
      },
      colProps: { span: 4 },
    },
    {
      field: 'noSewingSam',
      label: t('无缝SAM'),
      component: 'InputNumber',
      componentProps: {
        placeholder: t('请输入'),
      },
      colProps: { span: 6 },
    },
    {
      field: 'sampleId',
      label: t('样衣类型'),
      component: 'Select',
      componentProps: {
        placeholder: t('请选择'),
      },
      colProps: { span: 7 },
    },
  ];

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async () => {
    resetFields();
    setModalProps({ loading: true });
    // let customers = await getSysCustomerList();
    let dropDownValues = await queryDropDownBox();
    let styleExplainList = await getDictTypeList({ dictCode: 'style_explain_code' });
    // TODO: 客户名称 暂时不需要
    // dropDownValues.customerList = customers.List

    const { analysisList, sampleList } = dropDownValues;
    // 下拉框赋值
    updateSchema([
      {
        field: 'styleExplain',
        componentProps: {
          options: styleExplainList.map((item) => {
            return { value: item.id, label: item.dictName };
          }),
          showSearch: true,
          filterOption(input: string, option: any) {
            return option.label.indexOf(input) >= 0;
          },
        },
      },
      {
        field: 'analysisId',
        componentProps: {
          options: analysisList.map((item) => {
            return { value: item.id, label: item.analysisName };
          }),
          showSearch: true,
          filterOption(input: string, option: any) {
            return option.label.indexOf(input) >= 0;
          },
        },
      },
      {
        field: 'sampleId',
        componentProps: {
          options: sampleList.map((item) => {
            return { value: item.id, label: item.sampleName };
          }),
          showSearch: true,
          filterOption(input: string, option: any) {
            return option.label.indexOf(input) >= 0;
          },
        },
      },
    ]);
    setModalProps({ loading: false });
  });
  const [registerForm, { updateSchema, getFieldsValue, resetFields }] = useForm({
    labelWidth: 80,
    schemas,
    showActionButtonGroup: false,
    layout: 'horizontal',
  });

  async function handleSubmit() {
    confirmLoading.value = true;
    const formValues = getFieldsValue();
    resetFields();
    confirmLoading.value = false;

    closeModal();
    emits('success', formValues);
  }
</script>
